<template>
  <div class="root">
    <div class="left">
      <img v-if="props.docInfo.avator" :src="getUrl()">
      <img v-else src="../assets/images/avator.png">
      <div class="doctor">
        <p>{{ props.docInfo.name }}</p>
        <p class="post">{{ props.docInfo.position }}</p>
      </div>
    </div>
    <el-divider direction="vertical" style="height: 100px;"/>
    <div class="mid">
        <span class="title">
          擅长
        </span>
        <span class="content">
          {{ props.docInfo.skilled }}
        </span>
    </div>
    <div class="right">
      <el-button type="warning" @click="changeShow">立即预约 > ></el-button>
    </div>
    
  </div>

  <!-- 预约 -->
  <el-dialog v-model="visiable" title="是否预约" width=30% draggable :append-to-body="true"
    :modal="true">
    <span style="font-size: 18px;">当前预约人数为：{{people}}人</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="visiable=false">取消预约</el-button>
        <el-button type="success" @click="change_Reginfo">
          确定预约
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 挂号信息 -->
  <div v-if="vis_regInfo" class="dialog_bgc">
    <div class="dialog">
      <p style="font-size: 24px;">挂号信息</p>
      <span style="font-size: 22px; font-weight: bold;">{{ props.hospital }}{{ props.name }}</span>
      <el-form :model="PatientStore" :rules="rules_register" ref="form_register"
      style="margin-top: 10px;">
      <!-- 用户名 -->
      <div class="user" style="margin-bottom: 5px;">
        <p class="user-account">姓名:</p>
        <el-form-item class="input" prop="account">
          <el-input style="width: 300px;font-size: 18px;" 
          size="small" v-model="PatientStore.account"
          placeholder="请输入用户名"></el-input>
        </el-form-item>
      </div>
      <!-- 性别 -->
      <div style="display: flex;margin-bottom: 10px;">
        <span style="font-size: 18px;margin-right: 40px;margin-top: 8px;">性别:</span>
        <el-form-item prop="sex" style="margin-bottom: 2px;">
            <input type="radio" value='男' v-model="PatientStore.sex" 
            style="height: 20px;width: 20px;margin-right: 10px;"></input>
            <div style="display: inline-block;font-size: 18px;">男</div>

            <input type="radio" value='女' v-model="PatientStore.sex" 
            style="height: 20px;width: 20px;margin-right: 5px;margin-left: 40px;"></input>
            <span style="font-size: 18px;margin-left: 8px;">女</span>
        </el-form-item>
      </div>
      <!-- 身份证 -->
      <div class="user">
        <p style="font-size: 18px;margin-top: 10px;margin-right: 5px;">身份证号:</p>
        <el-form-item class="input" prop="id">
          <el-input style="width: 300px;font-size: 18px;" 
          size="small" v-model="PatientStore.idCard"
          placeholder="请输入身份证号"></el-input>
        </el-form-item>
      </div>
      <!-- 手机号 -->
      <div class="user">
        <p class="user-account" style="font-size: 18px;
        margin-top: 10px;margin-right: 25px;">手机号:</p>
        <el-form-item class="input" prop="phone">
          <el-input style="width: 300px;font-size: 18px;" 
          size="small" v-model="PatientStore.phone"
          placeholder="请输入手机号"></el-input>
        </el-form-item>
      </div>
      <!-- 预约时间 -->
      <div class="user">
        <span class="user-account" style="margin-top: 10px;margin-right:5px;">预约时间:</span>
        <el-form-item prop="time">
          <el-button 
          style="height: 33px;width: 300px;color: #c2c6cd;font-size: 18px;
          padding-top:7px;
          margin-top: 5px;"
          @click="isTime=true">{{PatientStore.time==''?'点击选择时间':'明天'+PatientStore.time}}</el-button>
        </el-form-item>
      </div>
      <!-- 病情描述 -->
      <div class="user">
        <p class="user-account" style="font-size: 18px;
        margin-top: 10px;margin-right: 5px;">病情描述:</p>
        <el-form-item class="input" prop="des">
          <el-input v-model="PatientStore.des" type="textarea" 
            size="small" placeholder="请输入病情描述"
            style="width: 303px;font-size: 18px;"></el-input>
        </el-form-item>
      </div>

      <div class="user">
        <span class="user-account" style="margin-top: 20px;">挂号费用：{{ props.price }}元</span>
      </div>
      </el-form>

      <div class="dialog-footer">
        <el-button type="danger" @click="vis_regInfo=false" style="margin-right: 20px;">取消预约</el-button>
        <el-button type="success" @click="GoPay">
          立即支付
        </el-button>
      </div>
    </div>
  </div>

  <!-- 选择时间 -->
  <el-dialog
    v-model="isTime"
    title="选择预约时间"
    width=30%
    :before-close="handleClose">
    <div class="content">
      <div class="morning">
        <el-button type="success" @click="select('上午')" style="width: 100%;">明天上午</el-button>
      </div>
      <div class="afternoon">
        <el-button type="success" @click="select('下午')" style="width: 100%;">明天下午</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script setup>
import { defineProps,ref,reactive,nextTick, onMounted} from 'vue';
import { useRouter } from 'vue-router';
// import { usePatientStore } from '@/store/patient';
import queryString from 'query-string';
import { reqGetdocNum} from '@/api/hospital';

// 当前预约人数
const people=ref(0)
onMounted(async ()=>{
  let res=await reqGetdocNum(props.docInfo.did)
  // console.log(res)
  if(res.data.code==1){
    people.value=res.data.data.nowPmNum
  }
})

// 获取图片真实地址
const getUrl=()=>{
  // console.log(props.docInfo.avator)
  // 分割为基础url和查询参数
  const parsed = queryString.parseUrl(props.docInfo.avatar);

  // 提取 mediaurl 参数的值
  const mediaUrlEncoded = parsed.query.riu;

  // 解码 mediaurl 参数的值
  const realImageUrl = decodeURIComponent(mediaUrlEncoded);
  return realImageUrl
}

const $router=useRouter()
const props=defineProps({
  docInfo:{
    type:Object
  },
  hospital:{
    type:String
  },
  name:{
    type:String
  },
  sid:String,did:String,price:String
})
// let PatientStore=usePatientStore()
let PatientStore=reactive({
  account:'',
  idCard:'',
  phone:'',
  sex:'',
  time:'',
  des:''
})
// 控制预约弹窗显示
let visiable=ref(false)
const changeShow=()=>{
  window.scrollTo(0, 0);
  visiable.value=true
}
// 挂号信息弹窗
let vis_regInfo=ref(false);
// 关闭预约弹窗 打开挂号信息并清空校验
const change_Reginfo=async ()=>{
  window.scrollTo(0, 0);
  visiable.value=false
  vis_regInfo.value=true
  PatientStore.account=''
  PatientStore.idCard='',
  PatientStore.phone='',
  PatientStore.sex='',
  PatientStore.time='',
  PatientStore.des=''
  localStorage.removeItem('PATIENT')
  await nextTick(() => {
    form_register.value.resetFields(); 
  });
  // form_register.value.resetFields()
}

//挂号信息校验
let form_register=ref()
const validateUsername = (rule, value, callback) => {
  const usernamePattern = /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/; // 匹配字母、数字和汉字，长度在1到10之间
  if (!value) {
    callback(new Error('用户名不能为空'));
  } else if (!usernamePattern.test(value)) {
    callback(new Error('用户名只能包含字母、数字或汉字，且长度在1到10之间'));
  } else {
    callback();
  }
};
const rules_register={
  // 用户名
  account:[{trigger:'blur'},
  {validator:validateUsername,trigger:'blur'}],

  // 身份证
  id: [
  {message: '请输入身份证号', trigger: 'blur' },
  { 
    validator: (rule, value, callback) => {
      const idCardPattern = /^(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))([0-2][1-9]|(3[01]))\d{3}(\d|X))$/; // 身份证号校验
      if (!PatientStore.idCard) {
        callback(new Error('身份证号不能为空'));
      } else if (!idCardPattern.test(PatientStore.idCard)) {
        callback(new Error('请输入有效的身份证号'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },],

  // 手机号
  phone: [
  { message: '请输入手机号', trigger: 'blur' },
  { 
    validator: (rule, value, callback) => {
      const phonePattern = /^[1][3-9][0-9]{9}$/; // 手机号校验规则
      if (!value) {
        callback(new Error('手机号不能为空'));
      } else if (!phonePattern.test(value)) {
        callback(new Error('请输入有效的手机号'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },],

  // 性别
  sex:[{trigger:'blur'},{
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('性别不能为空'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    }],
  
  // 预约时间
  time:[{trigger:'blur'},{
      validator: (rule, value, callback) => {
        if (PatientStore.time=='') {
          callback(new Error('请选择预约时间!'));
        }else {
          callback();
        }
      },
      trigger: 'blur',
    }],
  // 描述
  des:[{trigger:'blur'},{
      validator: (rule, value, callback) => {
        if (PatientStore.des=='') {
          callback(new Error('描述不能为空!'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    }],
}
// 选择时间弹窗
let isTime=ref(false)
const select=async (time)=>{
  PatientStore.time=time
  isTime.value=false
}

// 跳转支付
const GoPay = async () => {
  try {
    await form_register.value.validate();
    // 校验通过后跳转
    vis_regInfo.value = false;
    // 部署在服务器后pinia出现循环引用，仅提取关键字段
    // const patientData = {
    //   account: PatientStore.account,
    //   idCard: PatientStore.idCard,
    //   phone: PatientStore.phone,
    //   sex: PatientStore.sex,
    //   time: PatientStore.time,
    //   des: PatientStore.des,
    // };

    // localStorage.setItem('PATIENT', JSON.stringify(patientData));
    localStorage.setItem('PATIENT',JSON.stringify(PatientStore))
    $router.push({
      path: '/pay',
      query: {
        money:props.price,
        sid:props.sid,
        did:props.did,
      },
    });
  } catch (error) {
    console.error('表单校验失败:', error);
  }
};
</script>

<style lang="scss" scoped>
.root{
  background-color: #fff;
  min-height: 100px;
  width: 1920pxpx;
  border-radius: 6px;
  display: flex;
  padding-left: 5px;
  margin-top: 20px;
  .left{
    display: flex;
    align-items: center;
    width: 300px;
    img{
      height: 80px;
      width: 80px;
      border-radius: 50%;
      margin-top: 10px;
    }
    .doctor{
      margin-top: 5px;
      margin-left: 10px;
      width: 200px;
      .post{
        color: #9fa19f;
      }
    }
  }
  .mid{
    width: 1500px;
    margin-top: 5px;
    margin-left: 10px;
    display: flex;
    .title{
      color: #c0360c;
      font-size: 18px;
      width: 40px;
    }
    .content{
      font-size: 18px;
      width: 800px;
      margin-left: 20px;
      letter-spacing:2px
    }
  }
  .right{
    width: 1010px;
    display: flex;
    justify-content: center;
    align-items: center;
    el-button{
      margin-left: 600px;
    }
  }
}
.user{
    display: flex;
    height: 60px;
    .user-account{
      font-size: 18px;
      margin-top: 10px;
      margin-right: 40px;
    }
    .user-sex{
      height: 50px;
      font-size: 18px;
      margin-top: 10px;
      margin-right: 40px;
    }
    .input{
      height:50px;
      line-height: 50px;
    }
}
.dialog_bgc{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  z-index: 1000;
  .dialog{
    padding: 40px;
    background-image: url(../assets/images/挂号信息.png);
    background-size: cover;
    width: 492px;
    height: 740px;
    margin-top: 20px;
    .dialog-footer{
      margin-left: 100px;
      margin-top: 100px;
    }
  }
}
.content{
  display: flex;
  flex-direction: column;
  .morning,.afternoon{
    margin-top: 10px;
  }
  .time{
    font-size: 18px;
    background-color: #bbb;
    border-radius: 3px;
    margin-top: 10px;
  }
  .time:hover{
    cursor: pointer;
    color: #bbb;
  }
  .number{
    font-size: 18px;
    margin-left: 50px;
  }
}
</style>
